<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mask</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.img.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.sprite.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.mask.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Img, ImgSystem} = EVA.plugin.renderer.img;
      const {Mask, MaskSystem, MASK_TYPE} = EVA.plugin.renderer.mask;

      resource.addResource([
        {
          name: 'heart',
          type: RESOURCE_TYPE.IMAGE,
          src: {
            image: {
              type: 'png',
              url: '//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',
            },
          },
          preload: false,
        },
        {
          name: 'tag',
          type: RESOURCE_TYPE.SPRITE,
          src: {
            image: {
              type: 'png',
              url: '//gw.alicdn.com/mt/TB1KcVte4n1gK0jSZKPXXXvUXXa-150-50.png',
            },
            json: {
              type: 'json',
              url: '//gw.alicdn.com/mt/TB1d4lse4D1gK0jSZFsXXbldVXa.json',
            },
          },
          preload: true,
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
          }),
          new ImgSystem(),
          new MaskSystem(),
        ],
      });

      game.scene.transform.size = {
        width: 750,
        height: 1000,
      };

      const image = new GameObject('image', {
        size: {width: 200, height: 200},
      });
      image.addComponent(
        new Img({
          resource: 'heart',
        }),
      );
      game.scene.addChild(image);
      image.addComponent(
        new Mask({
          type: MASK_TYPE.Circle,
          style: {
            x: 100,
            y: 100,
            radius: 70,
          },
        }),
      );

      const image1 = new GameObject('image', {
        size: {width: 200, height: 200},
        position: {x: 400, y: 300},
      });
      image1.addComponent(
        new Img({
          resource: 'heart',
        }),
      );

      image1.addComponent(
        new Mask({
          type: MASK_TYPE.Img,
          style: {
            width: 100,
            height: 100,
            x: 20,
            y: 20,
          },
          resource: 'heart',
        }),
      );
      game.scene.addChild(image1);

      const image2 = new GameObject('image', {
        size: {width: 200, height: 200},
        position: {x: 100, y: 400},
      });
      image2.addComponent(
        new Img({
          resource: 'heart',
        }),
      );

      image2.addComponent(
        new Mask({
          type: MASK_TYPE.Sprite,
          style: {
            width: 100,
            height: 100,
            x: 20,
            y: 20,
          },
          resource: 'tag',
          spriteName: 'task.png',
        }),
      );
      game.scene.addChild(image2);
    </script>
  </body>
</html>
